var tdata = {
	thead: ["商品", "单价", "数量", "小计"],
	tbody: []
};
var goods = [{
		"id": 1001,
		"name": "卡西欧",
		"photo": "1.jpg",
		"price": 100,
		"show": false
	},
	{
		"id": 1002,
		"name": "卡西欧",
		"photo": "2.jpg",
		"price": 200,
		"show": false
	},
	{
		"id": 1003,
		"name": "卡西欧",
		"photo": "3.jpg",
		"price": 300,
		"show": false
	},
	{
		"id": 1004,
		"name": "卡西欧",
		"photo": "4.jpg",
		"price": 400,
		"show": true
	},
	{
		"id": 2001,
		"name": "C1 模型",
		"photo": "b1.png",
		"price": 10000,
		"show": true
	},
	{
		"id": 2002,
		"name": "C2 模型",
		"photo": "b2.png",
		"price": 20000,
		"show": true
	},
	{
		"id": 2003,
		"name": "C3 模型",
		"photo": "b3.png",
		"price": 30000,
		"show": true
	},
	{
		"id": 2004,
		"name": "C4 模型",
		"photo": "b4.png",
		"price": 40000,
		"show": true
	},
	{
		"id": 2005,
		"name": "C5 模型",
		"photo": "b5.png",
		"price": 50000,
		"show": true
	},
	{
		"id": 2006,
		"name": "C6 模型",
		"photo": "b6.png",
		"price": 60000,
		"show": true
	},
	{
		"id": 2007,
		"name": "C7 模型",
		"photo": "b7.png",
		"price": 70000,
		"show": true
	},
	{
		"id": 2008,
		"name": "C8 模型",
		"photo": "b8.png",
		"price": 80000,
		"show": true
	},
	{
		"id": 2009,
		"name": "C9 模型",
		"photo": "b9.png",
		"price": 90000
	},
	{
		"id": 2010,
		"name": "C10 模型",
		"photo": "b10.png",
		"price": 100000,
		"show": true
	},
	{
		"id": 3001,
		"name": "播放器",
		"photo": "播放器_03.png",
		"price": 1000,
		"show": true
	},
	{
		"id": 4001,
		"name": "德芙",
		"photo": "德芙_03.png",
		"price": 2000,
		"show": true
	},
	{
		"id": 5001,
		"name": "福临门大米",
		"photo": "福临门大米.png",
		"price": 3000,
		"show": true
	},
	{
		"id": 6001,
		"name": "莫斯利安",
		"photo": "莫斯利安.png",
		"price": 4000,
		"show": true
	},
	{
		"id": 6002,
		"name": "莫斯利安_big",
		"photo": "莫斯利安_big.png",
		"price": 5000,
		"show": true
	},
	{
		"id": 7001,
		"name": "牛肉",
		"photo": "牛肉.png",
		"price": 6000,
		"show": true
	},
	{
		"id": 7002,
		"name": "鱼肉",
		"photo": "鱼肉.png",
		"price": 7000,
		"show": true
	}
]

//获取对购物车操作的容器节点
var operate = document.getElementById("operate");
//获取数量和总计显示对象
var operate_em = operate.getElementsByTagName("em");
//获取推荐列表容器对象
var guess_products = document.getElementById("guess-products");
//获取显示表格内容的对象
var table = document.getElementById("cart");
//先渲染表头 - tHead - 在table中创建tHead
var thead = table.createTHead();
//在thead中插入tr
var tr = thead.insertRow();
//增加一个全选列
var check_all = add_checkbox(tr, dom_create("th"), '全选', checkbox_all);
var check_all_btn = document.getElementById("check_all");
check_all_btn.onchange = checkbox_all;
var class_arr = ["name", "price", "number", "total"]
//遍历data中第一个对象的属性
for (var i = 0, len = tdata.thead.length; i < len; i++) {
	//每遍历一个属性就创建一个th元素，同时把属性名赋值给th的内容
	var th = dom_create("th", class_arr[i]);
	th.innerHTML = tdata.thead[i];
	//把th追加到tr中
	tr.appendChild(th);
}
//增加一个操作列
var th = dom_create("th", "operate");
th.innerHTML = "操作";
tr.appendChild(th);
//在table中创建一个tbody
var tbody = table.createTBody();
//遍历data数组中的所有对象 - 每遍历一个对象，就创建一个tr
for (var i = 0; i < tdata.tbody.length; i++) {
	add_tbody(tdata.tbody[i]);
}
//计算
count_num();
/**
 * 增加一个选择列
 * @param {Element} name 要插入选择框的节点对象
 * @param {String} name 选择框描述
 * @param {Function} fun 选择框值改变后执行的函数
 */
function add_checkbox(tr, obj, name, fun) {
	var input = dom_create("input");
	input.type = "checkbox";
	input.checked = true;
	input.onchange = fun;
	obj.appendChild(input);
	var span = dom_create("span");
	span.innerHTML = name;
	obj.appendChild(span);
	obj.className = "checkbox";
	tr.appendChild(obj);
	return input;
}

/**
 * 增加一行商品数据和操作
 * @param {Object} data 商品数据
 */
function add_tbody(data) {
	//遍历data数组中的所有对象 - 每遍历一个对象，就创建一个tr
	var tr = tbody.insertRow();
	//增加一个选择列
	var check = add_checkbox(tr, tr.insertCell(), data.id, checkbox);

	//商品名称 + 图片
	var td_i = tr.insertCell();
	var img = new Image();
	img.src = "./img/goods/" + data.photo;
	td_i.appendChild(img);
	var span = dom_create("span");
	span.innerHTML = data.name;
	td_i.appendChild(span);

	//商品单价
	var td = tr.insertCell();
	td.className = "center";
	td.innerHTML = "¥" + data.price.toFixed(2);

	//商品数量
	var td_n = tr.insertCell();
	td_n.className = "center";
	var input = dom_create("input");
	input.min = 0;
	input.type = "number";
	input.value = data.num;
	input.onchange = function() {
		var value = parseInt(this.value);
		data.num = value > 0 ? value : 0;
		check.checked = !(data.num == 0 && check.checked);
		data.checkbox = !(data.num == 0 && check.checked);
		show_total();
	}
	var btn_sub = dom_create("button");
	btn_sub.innerHTML = "-";
	btn_sub.onclick = function() {
		data.num > 0 && data.num--;
		if (data.num == 0 && check.checked) {
			check.checked = false;
			data.checkbox = false;
		}
		show_total();
	}
	var btn_add = dom_create("button");
	btn_add.innerHTML = "+";
	btn_add.onclick = function() {
		data.num++;
		input.value = data.num;
		if (!check.checked) {
			check.checked = true;
			data.checkbox = true;
		}
		show_total();
	}

	function show_total() {
		input.value = data.num;
		td_t.innerHTML = "¥" + (data.num * data.price).toFixed(2);
		count_num();
	}
	td_n.appendChild(btn_sub);
	td_n.appendChild(input);
	td_n.appendChild(btn_add);

	//商品小计
	var td_t = tr.insertCell();
	td_t.innerHTML = "¥" + (data.num * data.price).toFixed(2);
	td_t.className = "center";

	// 插入一个操作按钮 - 放删除操作
	var td = tr.insertCell();
	//创建一个操作按钮 - button
	var btn = dom_create("button");
	btn.innerHTML = "删除";
	//将btn放入到td中
	td.appendChild(btn);
	//为button绑定事件处理函数 - click
	btn.onclick = function() {
		//如果想要删除当前指定行 - 必须知道当前行下标
		var index = this.parentNode.parentNode.rowIndex;
		table.deleteRow(index);
		tdata.tbody[index - 1].li.style.display = "block";
		tdata.tbody.splice(index - 1, 1);
		count_num();
	}
}

/**
 * 选择所有商品
 */
function checkbox_all() {
	var len = tdata.tbody.length;
	var all = this.checked;
	if (len > 0) {
		var rows = tbody.rows;
		for (var i = 0; i < len; i++) {
			if (!tdata.tbody[i].checkbox || !all) {
				var input = rows[i].getElementsByTagName("input")[0];
				input.checked = all;
				tdata.tbody[i].checkbox = all;
			};
		}
		count_num();
	}

}

/**
 * 反选商品
 */
function checkbox_all_no() {
	var len = tdata.tbody.length;
	if (len > 0) {
		var rows = tbody.rows;
		for (var i = 0; i < len; i++) {
			var input = rows[i].getElementsByTagName("input")[0];
			input.checked = !input.checked;
			tdata.tbody[i].checkbox = input.checked;
		}
		count_num();
	}
}

/**
 * 选择当前商品
 */
function checkbox() {
	var index = this.parentNode.parentNode.rowIndex - 1;
	tdata.tbody[index].checkbox = tdata.tbody[index].checkbox == false;
	count_num();
}

/**
 * 计算当前选中的数量和总价格
 */
function count_num() {
	var sum = 0;
	var price = 0;
	var all = true;
	for (var i = 0, len = tdata.tbody.length; i < len; i++) {
		if (tdata.tbody[i].checkbox) {
			sum++;
			price += tdata.tbody[i].num * tdata.tbody[i].price;
		} else {
			all = false;
		}
	}
	all && (all = len > 0);
	operate_em[0].innerHTML = sum;
	operate_em[1].innerHTML = "¥" + price.toFixed(2);
	check_all.checked = all;
	check_all_btn.checked = all;
}

/**
 * 删除所选商品
 */
function del_tdata() {
	var rows = tbody.rows;
	var len = tdata.tbody.length;
	for (var i = len - 1; i > -1; i--) {
		if (tdata.tbody[i].checkbox) {
			table.deleteRow(rows[i].rowIndex);
			tdata.tbody[i].li.style.display = "block";
			tdata.tbody.splice(i, 1);
		}
	}
	count_num();
}

/**
 * 删除购物车所有商品
 */
function del_tdata_all() {
	var rows = tbody.rows;
	var len = tdata.tbody.length;
	for (var i = len - 1; i > -1; i--) {
		table.deleteRow(rows[i].rowIndex);
		tdata.tbody[i].li.style.display = "block";
	}
	tdata.tbody = [];
	count_num();
}

/**
 * 创建元素节点
 */
function dom_create(name) {
	var elem = document.createElement(name)
	if (arguments.length == 2) {
		elem.className = arguments[1];
	}
	return elem;

}

/**
 * 匿名函数
 */
(function () {
	var goods_div = [];
	var goods_num = goods.length;
	var ul_num = Math.ceil(goods_num / 4);
	var ul_show = 0;
	for (var i = 0; i < ul_num; i++) {
		var n = (i + 1) * 4;
		goods_div[i] = dom_create("div", "goods-list c-panel");
		goods_div[i].style.display = "none";
		var ul = dom_create("ul");
		for (var j = i * 4; j < n && j < goods_num; j++) {
			//创建列表项
			var li = dom_create("li");
			//创建内部容器
			var li_div = dom_create("div", "item");
			//创建图片容器
			var li_div_img = dom_create("div", "p-img");
			//创建图片节点对象
			var li_div_img_img = new Image();
			li_div_img_img.width = 160;
			li_div_img_img.height = 160;
			li_div_img_img.src = "./img/goods/" + goods[j].photo;
			//创建商品名容器
			var li_div_name = dom_create("div", "p-name");
			li_div_name.innerHTML = goods[j].name;
			//创建价格容器
			var li_div_price = dom_create("div", "p-price");
			li_div_price.innerHTML = "<strong><em>￥</em><i>" + goods[j].price.toFixed(2) + "</i></strong>";
			//在将图片节点添加到图片容器中
			li_div_img.appendChild(li_div_img_img);
			//将图片容器添加到内部容器中
			li_div.appendChild(li_div_img);
			//将商品名添加到内部容器中
			li_div.appendChild(li_div_name);
			//将商品名添加到内部容器中
			li_div.appendChild(li_div_price);
			//将内部容器添加到列表项中
			li.appendChild(li_div);
			//将列表项添加到列表中
			ul.appendChild(li);
			//列表点击事件 - 将商品添加到购物车中，并隐藏显示
			li_div.onclick = (function(data, li) {
				var goods = data;
				goods.num = 1;
				goods.checkbox = true;
				goods.li = li;
				return function() {
					li.style.display = "none";
					tdata.tbody.push(goods)
					add_tbody(goods);
					count_num();
				}
			})(goods[j], li);
		}
		goods_div[i].appendChild(ul);
		goods_div[i].onmouseover = onmouseover;
		goods_div[i].onmouseout = onmouseout;
		guess_products.appendChild(goods_div[i]);
	}
	//显示第一波推荐
	goods_div[ul_show].style.display = "block";
	//创建切换容器
	var div_tab = dom_create("div", "c-page");
	//创建切换按钮
	var div_tab_prev = dom_create("a", "c-prev");
	var div_tab_next = dom_create("a", "c-next");
	div_tab_prev.href = "javascript:void(0)";
	div_tab_next.href = "javascript:void(0)";
	div_tab_prev.innerHTML = "&lt;";
	div_tab_next.innerHTML = "&gt;";
	//将切换按钮添加到切换容器中
	div_tab.appendChild(div_tab_prev);
	div_tab.appendChild(div_tab_next);
	//将切换容器添加到推荐容器中
	guess_products.appendChild(div_tab);
	//添加切换容器和切换按钮的事件
	div_tab.onmouseover = onmouseover;//鼠标进入
	div_tab.onmouseout = onmouseout;//鼠标移出
	div_tab_prev.onclick = function() {
		goods_div[ul_show].style.display = "none";
		ul_show--;
		if (ul_show == -1) {
			ul_show = goods_div.length-1;
		};
		goods_div[ul_show].style.display = "block";
	};
	div_tab_next.onclick = function() {
		goods_div[ul_show].style.display = "none";
		ul_show++;
		if (ul_show == goods_div.length) {
			ul_show = 0;
		};
		goods_div[ul_show].style.display = "block";
	};

	function onmouseover() {
		div_tab.style.display = "block";
	}

	function onmouseout() {
		div_tab.style.display = "none";
	}
})();
